<template>
	<view v-show="visible" class="my">
		<view class="layout-padding-12 my-head">
			<view class="person-info">
				<u--image :width="60" :height="60" :src="userInfo.avatar_url" shape="circle"></u--image>
				<view class="person-info-item">
					<view class="name">{{userInfo.nickname}}</view>
					<view class="text-sm" style="color: #666666;">{{userInfo.dept_names}}</view>
					<view class="id">
						ID:{{userInfo.user_id}}
					</view>
				</view>
			</view>
			<view v-if="rankingList.length" style="position: absolute; z-index: 1; width: 142px; height: 113px; right: 15px; top: 20px;" @click="isRanking = true">
				<u--image :width="142" :height="113" src="https://code-app.oss-cn-beijing.aliyuncs.com/other/99.png"></u--image>
				<view style="color: #DC4411; font-size: 12px; font-weight: bold; position: absolute; width: 76px; left: 50%; margin-left: -38px; left: 51%; top: 5px; text-align: center;">小组排名(月)</view>
				<view style="color: #DC4411; font-size: 28px; font-weight: bold; position: absolute; width: 76px; left: 50%; margin-left: -38px; left: 51%; top: 18px; text-align: center;">{{rankingList[0].rank}}</view>
				<view style="position: absolute; bottom: 25px; left: 50%; margin-left: -38px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: linear-gradient( 90deg, #FFE37D 0%, #FFB91E 100%); width: 76px; height: 25px; line-height: 25px; text-align: center; box-sizing: content-box; border-radius: 15px; font-size: 16px; font-weight: bold; color: #9F5D0C;">{{rankingList[0].nickname}}</view>
			</view>
			<view style="position: relative; z-index: 2; background: linear-gradient( 135deg, #8FCB3E 0%, #52B36D 100%); border-radius: 10px; padding: 10px; width: 100%; margin-top: 20px;">
				<view class="Grid Grid--center Grid--1of3 text-center">
					<view class="Grid-cell">
						<view style="padding: 20px 0; border-radius: 10px; background: rgba(0, 0, 0, .05); width: 100px; margin: 0 auto 10px;">
							<view style="color: #F0FF21; font-weight: bold; margin-bottom: 5px;">
								<text class="text-xs">&yen;</text>
								<text class="text-base">{{userInfo.sale_statistics.today_sale}}</text>
							</view>
							<view class="text-xs text-white">今日销售额</view>
						</view>
					</view>
					<view class="Grid-cell">
						<view style="padding: 20px 0; border-radius: 10px; background: rgba(0, 0, 0, .05); width: 100px; margin: 0 auto 10px;">
							<view style="color: #F0FF21; font-weight: bold; margin-bottom: 5px;">
								<text class="text-xs"></text>
								<text class="text-base">{{userInfo.sale_statistics.today_order}}</text>
							</view>
							<view class="text-xs text-white">今日订单数</view>
						</view>
					</view>
					<view class="Grid-cell">
						<view style="padding: 20px 0; border-radius: 10px; background: rgba(0, 0, 0, .05); width: 100px; margin: 0 auto 10px;">
							<view style="color: #F0FF21; font-weight: bold; margin-bottom: 5px;">
								<text class="text-xs"></text>
								<text class="text-base">{{userInfo.sale_statistics.fans_num}}</text>
							</view>
							<view class="text-xs text-white">粉丝数</view>
						</view>
					</view>
					<view class="Grid-cell">
						<view style="padding: 20px 0; border-radius: 10px; background: rgba(0, 0, 0, .05); width: 100px; margin: 0 auto 10px;">
							<view style="color: #F0FF21; font-weight: bold; margin-bottom: 5px;">
								<text class="text-xs"></text>
								<text class="text-base">{{userInfo.sale_statistics.conversion_rate}}</text>
							</view>
							<view class="text-xs text-white">综合转化率</view>
						</view>
					</view>
					<view class="Grid-cell">
						<view style="padding: 20px 0; border-radius: 10px; background: rgba(0, 0, 0, .05); width: 100px; margin: 0 auto 10px;">
							<view style="color: #F0FF21; font-weight: bold; margin-bottom: 5px;">
								<text class="text-xs"></text>
								<text class="text-base">{{userInfo.sale_statistics.avg_price}}</text>
							</view>
							<view class="text-xs text-white">客单价</view>
						</view>
					</view>
					<view class="Grid-cell">
						<view style="padding: 20px 0; border-radius: 10px; background: rgba(0, 0, 0, .05); width: 100px; margin: 0 auto 10px;">
							<view style="color: #F0FF21; font-weight: bold; margin-bottom: 5px;">
								<text class="text-xs"></text>
								<text class="text-base">{{userInfo.sale_statistics.view_total}}</text>
							</view>
							<view class="text-xs text-white">方案浏览数</view>
						</view>
					</view>
					<view class="Grid-cell">
						<view style="padding: 20px 0; border-radius: 10px; background: rgba(0, 0, 0, .05); width: 100px; margin: 0 auto 10px;">
							<view style="color: #F0FF21; font-weight: bold; margin-bottom: 5px;">
								<text class="text-xs">&yen;</text>
								<text class="text-base">{{userInfo.sale_statistics.total_sale}}</text>
							</view>
							<view class="text-xs text-white">累计销售额</view>
						</view>
					</view>
					<view class="Grid-cell">
						<view style="padding: 20px 0; border-radius: 10px; background: rgba(0, 0, 0, .05); width: 100px; margin: 0 auto 10px;">
							<view style="color: #F0FF21; font-weight: bold; margin-bottom: 5px;">
								<text class="text-xs"></text>
								<text class="text-base">{{userInfo.sale_statistics.total_order}}</text>
							</view>
							<view class="text-xs text-white">累计订单数</view>
						</view>
					</view>
					<view class="Grid-cell">
						<view style="padding: 20px 0; border-radius: 10px; background: rgba(0, 0, 0, .05); width: 100px; margin: 0 auto 10px;">
							<view style="color: #F0FF21; font-weight: bold; margin-bottom: 5px;">
								<text class="text-xs"></text>
								<text class="text-base">{{userInfo.sale_statistics.total_publish}}</text>
							</view>
							<view class="text-xs text-white">方案发布数</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="padding: 0 23px;">
			<uni-grid v-if="visible" :column="3" :show-border="false" :square="false" style="background: #ffffff; border-radius: 0px 0px 10px 10px;">
				<uni-grid-item>
					<view class="grid-item-box" @click="getSkip('/pages/user/detailed/detailed')">
						<image src="https://code-app.oss-cn-beijing.aliyuncs.com/other/15.png" mode="widthFix" style="width: 28px; height: 28px;" />
						<text class="text-xs" style="color: #222222; padding: 5px 0;">收入明细</text>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="grid-item-box" @click="getSkip('/pages/user/statistics/statistics')">
						<image src="https://code-app.oss-cn-beijing.aliyuncs.com/other/13.png" mode="widthFix" style="width: 28px; height: 28px;" />
						<text class="text-xs" style="color: #222222; padding: 5px 0;">每日统计</text>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="grid-item-box" @click="isShow = true">
						<image src="https://code-app.oss-cn-beijing.aliyuncs.com/other/12.png" mode="widthFix" style="width: 28px; height: 28px;" />
						<text class="text-xs" style="color: #222222; padding: 5px 0;">创建收款码</text>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="grid-item-box" @click="getSkip('/pages/user/fans/fans')">
						<image src="https://code-app.oss-cn-beijing.aliyuncs.com/other/16.png" mode="widthFix" style="width: 28px; height: 28px;" />
						<text class="text-xs" style="color: #222222; padding: 5px 0;">我的粉丝</text>
					</view>
				</uni-grid-item>
				<!-- <uni-grid-item>
					<view class="grid-item-box">
						<image src="https://code-app.oss-cn-beijing.aliyuncs.com/other/11.png" mode="widthFix" style="width: 28px; height: 28px;" />
						<text class="text-xs" style="color: #222222; padding: 5px 0;">粉丝消息</text>
					</view>
				</uni-grid-item> -->
				<uni-grid-item>
					<view class="grid-item-box" @click="reset">
						<image src="https://code-app.oss-cn-beijing.aliyuncs.com/other/14.png" mode="widthFix" style="width: 28px; height: 28px;" />
						<text class="text-xs" style="color: #222222; padding: 5px 0;">清除缓存</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		<u-divider style="width: 100%;" text="All rights reserved. v1.2.2"></u-divider>

		<!-- 合成收款码 -->
		<u-popup :show="isShow" @close="isShow = false" closeable mode="center" safeAreaInsetTop
			:closeOnClickOverlay="false">
			<view style="padding: 12px 10px;">创建收款码</view>
			<view style="width: 70vw; padding: 0 20px 20px;">
				<u--form class="custom-form" labelPosition="left" labelWidth="0" :labelStyle="formLabelStyle" :model="form" ref="uForm" :rules="rules" errorType="message" style="padding: 0 10px; margin-bottom: 10px;">
					<u-form-item label=" " prop="price">
						<u--input v-model="form.price" type="digit" placeholder="请输入收款价格" border="none" @focus="showWechat = false"></u--input>
					</u-form-item>
					<u-form-item label=" " prop="wechat_id">
						<view style="width: 100%; color: #222222;" @click="() => {
							showWechat = true;
						}">{{currentWechat.name}}</view>
					</u-form-item>
				</u--form>
				<view class="Grid">
					<view class="Grid-cell" style="padding: 0 4px;">
						<u-button type="primary" text="创建" @click="handleSkm"></u-button>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 排行榜 -->
		<u-popup :show="isRanking" @close="isRanking = false" z-index="9999999" class="rankingStyle" closeable mode="center" :safe-area-inset-bottom="false"
			:closeOnClickOverlay="false">
			<ranking :rankingList="rankingList"></ranking>
		</u-popup>
		<u-action-sheet :show="showWechat" :actions="wechat_list" title="请选择" description="" @close="showWechat = false"
			@select="wechatSelect">
		</u-action-sheet>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import {
		removeParam,
		parseQuery
	} from '@/utils/index.js'
	import {
		addContent,myRanking
	} from '@/service/index.js'
	import ranking from '../../../ranking/index.vue'

	export default {
		name: 'my',
		components: {
			ranking
		},
		props: {
			visible: {
				type: Boolean,
				default: false
			},
		},
		watch: {
			visible() {
				this.visible && this.initData()
			}
		},
		data() {
			return {
				rankingList: [],
				isRanking: false,
				showWechat: false,
				wechat_list: [],
				// 当前选择
				currentWechat: {},
				isShow: false,
				formLabelStyle: {
					fontSize: '12px',
					color: '#2D3338',
					paddingLeft: '0',
				},
				form: {
					price: '',
					category_ids: [5],
					title: '收款码',
					draft_status: 4,
					wechat_id: ''
				},
				rules: {
					price: [{
						validator: (rule, value, callback) => {
							if (value === '') return false
							return /^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0\.\d{1,2}$/.test(value) || value == 0;
						},
						message: '输入金额有误!',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur'],
					}]
				},
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.login.userInfo,
				redirect_uri: state => state.login.redirect_uri
			}),
		},
		mounted() {
			this.initData()
			this.getMyRanking()
		},
		methods: {
			async getMyRanking () {
				const result = await myRanking()
				this.rankingList = result.data.ranking_list||[]
			},
			async initData() {
				try {
					if (Object.keys(this.userInfo).length) await this.$store.dispatch('login/userinfoAction');
					
					let arr = []
					for (let i = 0; i < this.userInfo.wechat_list.length; i++) {
						arr.push({
							name: this.userInfo.wechat_list[i].title,
							wechat_id: this.userInfo.wechat_list[i].wechat_id,
							app_id: this.userInfo.wechat_list[i].app_id
						})
					}
					if (arr.length) {
						this.currentWechat = arr[0]
						this.form.wechat_id = arr[0].wechat_id
					}
					this.wechat_list = arr
				} catch (error) {}
			},
			// 跳转页面
			getSkip(url) {
				uni.navigateTo({
					url: `${url}?appid=${this.userInfo.appid}`
				})
			},
			reset() {
				uni.showModal({
					content: '是否清除本地缓存?',
					success: async (res) => {
						if (res.confirm) {
							const {
								appid
							} = parseQuery()
							try {
								let http = ``
								if (this.redirect_uri) {
									// 防封
									http = `${this.redirect_uri}/user/#/?appid=${appid}`
								} else {
									// 常规
									http = `${window.location.href}`
									http = removeParam("state", http)	
									http = removeParam("code", http)
								}
								await this.$store.dispatch('login/loginOut');
								uni.showToast({
									title: '缓存清除成功!',
									icon: 'none'
								})
								// 境内境外均需境内授权
								window.location.href =
									`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(http.replace("#", "virtually"))}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
							} catch (error) {}
						} else if (res.cancel) {}
					}
				});
			},
			async handleSkm() {
				await this.$refs.uForm.validate()
				const result = await addContent(this.form)
				if (result.code == 200) {
					this.isShow = false
					this.form = {
						price: '',
						category_ids: [5],
						title: '收款码',
						draft_status: 4,
						wechat_id: ''
					}
					uni.showToast({
						title: '创建成功!',
						icon: 'none'
					})
					uni.$emit('tabbarIndexUpdate', {
						tabbarIndex: 0,
						tabIndex: 4
					})
				}
			},
			// 公众号选择回调
			wechatSelect(e) {
				this.currentWechat = e
				this.form.wechat_id = e.wechat_id
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my {
		height: 100%;
		background: #F1FFEB;

		.my-head {
			position: relative;
			background: url('@/static/images/my/bj.png') top center no-repeat;
			background-size: 100% 100%;
			padding: 35px 23px 0;

			.person-info {
				display: flex;
				align-items: center;
				flex: 1;

				.person-info-item {
					margin-left: 8px;

					.name {
						font-weight: 600;
						font-size: 18px;
					}

					.id {
						font-weight: 400;
						font-size: 12px;
						color: rgba(0, 0, 0, 0.4);
						line-height: 20px;
					}
				}
			}
		}

		.grid-item-box {
			flex: 1;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 15px 0;
		}
	}
	.rankingStyle{
		::v-deep .u-fade-enter-active{
			background-color: rgba(0, 0, 0, 0.8) !important;
		}
		::v-deep .u-popup__content{
			background-color: inherit;
			width: 100%;
		}
	}
</style>